<template>
	<view>
		<view class="head-address1">
			<image src="../../../static/my/address_icon.png" mode=""></image>
			<view class="address-box">
				<text class="adres-txt-2">{{ orderList.province + orderList.city + orderList.area}}</text>
				<view class="adres-txt-3">{{ orderList.address }}</view>
				<text class="adres-txt-4">{{ orderList.accept_name }}</text>
				<text class="adres-txt-5">{{ orderList.mobile }}</text>
			</view>
		</view>

		<view class="order-info">
			<text style="font-weight: bold;font-size: 14px;">订单信息</text>
			<view class="info-box">
				<view class="info-tit">
					<text class="fl">订单编号：</text>
					<text class="ri">{{ orderList.order_no }}</text>
				</view>
				<view class="info-tit">
					<text class="cb fl">下单时间：</text>
					<text class="ri">{{ orderList.create_time }}</text>
				</view>
				<view class="info-tit">
					<text class="cb fl">订单状态：</text>
					<text class="ri green">{{ orderList.order_status }}</text>
				</view>
				
				<view class="info-tit">
					<text class="cb fl">完成时间：</text>
					<text class="ri">{{ orderList.completion_time }}</text>
				</view>
			</view>
		</view>

		<view class="cart-list">
			<view class="cart-list-box">
				<view class="list-box-head">
					<image src="../../../static/cart/store.png" mode=""></image>
					<text>国集采供应链</text>
					<u-icon name="arrow-right" size="12" style="margin: 4rpx 0 0 4rpx;"></u-icon>
				</view>
				<view class="list-box-cont" v-for="(item,index) in detailList" :key="index" @click="toProductDetail(item.goods_id)">
					<view class="listbox-cont-left">
						<image :src="baseUrl + item.img"></image>
					</view>
					<view class="listbox-cont-right">
						<view class="cont-right-top">
							<view class="cont-tit">{{ item.name }}</view>
							<view class="cont-spec">{{ item.sc }}</view>
						</view>
						<view class="cont-right-bot">
							<view class="cont-price-box">
								<text class="price-icon">￥</text>
								<text class="price-tit">{{ item.goods_price }}</text>
							</view>
							<view style="color: #999;font-size: 26rpx;margin-top: 10rpx;">x {{ item.goods_nums }}</view>
						</view>
					</view>
				</view>
				<view class="all-price">
					<text>{{ orderList.payable_amount }}</text><text>￥</text><text>商品总金额：</text>
				</view>
			</view>
		</view>

		<view class="order-info">
			<text style="font-weight: bold;font-size: 14px;">支付及配送方式</text>
			<view class="info-box">
				<view class="info-tit">
					<text class="fl">支付方式：</text>
					<text class="ri">{{ orderList.payment }}</text>
				</view>
				<view class="info-tit">
					<text class="cb fl">交易单号：</text>
					<text class="ri">{{ orderList.trade_no }}</text>
				</view>
				<view class="info-tit">
					<text class="cb fl">付款时间：</text>
					<text class="ri">{{ orderList.pay_time }}</text>
				</view>
				<view class="info-tit">
					<text class="cb fl">支付说明：</text>
					<text class="ri">{{ orderList.paynote }}</text>
				</view>
				<view class="info-tit">
					<text class="cb fl">物流公司：</text>
					<text class="ri green">{{ orderList['freight']['freight_name'] }}</text>
				</view>
				<view class="info-tit">
					<text class="cb fl">快递单号：</text>
					<text class="ri green">{{ orderList['freight']['delivery_code'] }}</text>
				</view>
				<view class="info-tit">
					<text class="cb fl">发货时间：</text>
					<text class="ri">{{ orderList.send_time }}</text>
				</view>
			
			</view>
		</view>


		<view class="order-info">
			<text style="font-weight: bold;font-size: 14px;">发票信息</text>
			<view class="info-box">
				<view class="info-tit">
					<text class="fl">所需税金：</text>
					<text class="ri">￥{{ orderList.taxes }}</text>
				</view>
				<view class="info-tit">
					<text class="cb fl">发票抬头：</text>
					<text class="ri">{{ orderList.data_invoice_info }}</text>
				</view>
				<view class="info-tit">
					<text class="cb fl">发票是否已开：</text>
					<text class="ri" v-if="orderList.fapiaoupname">是</text>
					<text class="ri" v-else>否</text>
				</view>
				<view class="info-tit">
					<text class="cb fl">发票物流：</text>
					<text class="ri">{{ orderList.wuliunumber }}</text>
				</view>
				
			</view>
		</view>

		<view class="order-info">
			<text style="font-weight: bold;font-size: 14px;">订单汇总</text>
			<view class="info-box">
				<view class="info-tit">
					<text class="fl">商品总金额：</text>
					<text class="ri org">￥{{ orderList.payable_amount }}</text>
				</view>
				<view class="info-tit">
					<text class="fl">+ 运费：</text>
					<text class="ri org">￥{{ orderList.real_freight }}</text>
				</view>
				<view class="info-tit">
					<text class="cb fl">+ 税金：</text>
					<text class="ri org">￥{{ orderList.taxes }}</text>
				</view>
				<view class="info-tit">
					<text class="cb fl">+ 安装费：</text>
					<text class="ri org">￥{{ orderList.install_fee }}</text>
				</view>
				<view class="info-tit">
					<text class="cb fl">+ 订单二次费用：</text>
					<text class="ri org">￥{{ orderList.increase_amount }}</text>
				</view>
				<view class="info-tit">
					<text class="cb fl">- 订单折扣：</text>
					<text class="ri org">￥{{ orderList.discount }}</text>
				</view>
				<view class="info-tit">
					<text class="cb fl">订单总金额：</text>
					<text class="ri org">￥{{ orderList.order_amount }}</text>
				</view>
				
			</view>


		</view>

		<view style="height:50px;"></view>

		<view class="foot_fix">
			<view class="bot-btn" v-if="orderList.isCancel==true">
				<view class="bot-btn">
					<text class="bot-btn-1" @click="orderOff(orderList.id)">取消订单</text>
				</view>
			</view>
			<view class="bot-btn" v-if="orderList.isGoPay==true">
				<view class="bot-btn">
					<text class="bot-btn-1">立即付款</text>
				</view>
			</view>
			<view class="bot-btn" v-if="orderList.isConfirm==true">
				<view class="bot-btn">
					<text class="bot-btn-1" @click="orderconfirm(orderList.id)">确认收货</text>
				</view>
			</view>
			<view class="bot-btn" v-if="orderList.isRefund==true">
				<view class="bot-btn">
					<text class="bot-btn-1">申请售后</text>
				</view>
			</view>
			<view class="bot-btn" v-if="orderList.pay_type==21 && orderList.status == '1' && orderList.pay_status =='0' && (orderList.confirm_pay_bill == 0 || orderList.confirm_pay_bill == 3)">
				<view class="bot-btn">
					<text class="bot-btn-1" @click="getUploadPay(orderList.id,orderList.order_no)">上传凭证</text>
				</view>
			</view>
		</view>











	</view>
</template>

<script>
	export default {
		data() {
			return {
				userId: '',
				orderId: '',
				orderList: {},
				detailList: [],
				baseUrl: 'https://gjc.hy-dzsc.cn/',
			}
		},
		onLoad(e) {
			this.orderId = e.orderId
			this.userId = e.userId
			this.getOrderDetail()
		},
		methods: {
			// 获取订单详情
			getOrderDetail(status){
				this.$getHttp(`/gjcApi/getOderDetail?id=${this.orderId}`, {}, res => {
					this.orderList = res.orderList
					res.goodsList.forEach(v => {
						this.detailList.push(v)
					})
					
				})
				console.log(this.orderList)
			},
			// 跳转商品详情
			toProductDetail(id){
				uni.navigateTo({
					url: `/pages/class/product-detail?proId=${id}&userId=${this.userId}`
				})
			},
			//取消订单
			orderOff(id){
			uni.showModal({
					title: '操作提示',
					content: '确定要取消该订单吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							this.$getHttp(`/gjcApi/order_status?order_id=${id}&op=cancel`,{},res =>{
								uni.showToast({
									title:res.msg,
									duration:1000,
									icon:'none'
								}),
								location.reload()
							})
						}
					}
				})

				
			},
			// 确认收货
			orderconfirm(id){
				uni.showModal({
					title: '操作提示',
					content: '确定要操作该订单为已收货状态吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							this.$getHttp(`/gjcApi/order_status?order_id=${id}&op=confirm`,{},res =>{
								uni.showToast({
									title:res.msg,
									duration:1000,
									icon:'none'
								}),
								location.reload()
							})
						}
					}
				})	
			},
			//待上传支付凭证
			getUploadPay(id,order_no){
					uni.navigateTo({
						url: `/pages/cart/getUploadPay?orderid=${id}&order_no=${order_no}&user_id=${this.userId}`
					})
				
			},
		}
	}
</script>

<style lang="scss" scoped>
.fl{float:left;width:50%}
.ri{float:right;width:50%;text-align:right;}
.cb{clear:both;}
.green{color: #379339;}
.org{color: #f18b49;}
.foot_fix{
	box-sizing: border-box;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 998;
    background-color: rgb(255, 255, 255);
    margin: auto;
    border: 1px solid #f7f7f7;
    line-height: 40px;
    text-align: right;
    padding: 0px 5px;
}
.foot_fix .bot-btn .bot-btn-1{
	border-radius: 20px;
    color: #f18b49;
    border: 0.5px solid #f18b49;
}
.foot_fix .bot-btn uni-text{
    font-size: 13px;
    padding: 6px 15px;
    border-radius: 20px;
    border: 0.5px solid #c0c0c0;
}

.head-address1{
	display: flex;
	align-items: center;
	padding: 20rpx 20rpx 20rpx 0;
	background: $uni-model-color;
	image{
		width: 60rpx;
		height: 60rpx;
		flex-shrink: 0;
		padding: 0 30rpx;
	}
	.address-box{
		.adres-txt-2{
			font-size: 28rpx;
			letter-spacing: 2rpx;
		}
		.adres-txt-3{
			margin: 14rpx 0;
			font-size: 32rpx;
			font-weight: bold;
		}
		.adres-txt-4,.adres-txt-5{
			font-size: 28rpx;
			margin-right: 20rpx;
		}
	}
}
.cart-list{
	padding: 0 15rpx;
	.cart-list-box{
		margin: 25rpx 0;
		padding: 25rpx 20rpx;
		border-radius: 20rpx;
		background: $uni-model-color;
		.list-box-head{
			display: flex;
			align-items: center;
			image{
				width: 36rpx;
				height: 36rpx;
				margin-right: 8rpx;
			}
			text{
				font-size: 28rpx;
				font-weight: bold;
				letter-spacing: 1rpx;
			}
		}
		.list-box-cont{
			display: flex;
			margin-top: 30rpx;
			.listbox-cont-left{
				display: flex;
				align-items: center;
				image{
					// flex-shrink: 1;
					width: 200rpx;
					height: 200rpx;
					border-radius: 10rpx;
					border: 2rpx solid $uni-text-color;
				}
			}
			.listbox-cont-right{
				width: 482rpx;
				display: flex;
				margin-left: 20rpx;
				flex-direction: column;
				justify-content: space-between;
				.cont-right-top{
					.cont-tit{
						overflow:hidden;
						font-size: 28rpx;
						font-weight: bold;
						letter-spacing: 1rpx;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}
					.cont-spec{
						font-size: 22rpx;
						border-radius: 8rpx;
						margin: 14rpx 0 35rpx 0;
						color: $uni-text-color-grey;
						// background-color:rgba(0, 0, 0, .1);
					}
				}
				.cont-right-bot{
					display: flex;
					color: $uni-text-color;
					justify-content: space-between;
					.cont-price-box{
						.price-icon{
							font-size: 24rpx;
						}
						.price-tit{
							font-size: 34rpx;
							font-weight: bold;
						}
					}
				}
			}
		}
		.all-price{
			display: flex;
			margin-top: 20rpx;
			align-items: center;
			flex-direction: row-reverse;
			text:nth-child(1){
				font-size: 38rpx;
				margin-bottom: 8rpx;
				color: $uni-text-color;
			}
			text:nth-child(2){
				font-size: 26rpx;
				color: $uni-text-color;
			}
			text:nth-child(3){
				font-size: 26rpx;
				margin-bottom: 2rpx;
			}
		}
	}
}
.order-info{
	margin: 25rpx 0;
	border-radius: 20rpx;
	padding: 20rpx;
	background: $uni-model-color;
	.info-box{
		padding-left: 8rpx;
		.info-tit{
			font-size: 26rpx;
			padding-top: 25rpx;
			height:15px;
			color: $uni-text-color-placeholder;
		}
	}
}
</style>
